<template>
  <div class='line_chart public_long_chart'>
    <div class='options'>
      <slot name="head">
        <label>选择框: </label>
        <select>
          <option value="">平台收入</option>
          <option value="0">北京</option>
          <option value="1">上海</option>
          <option value="2">广州</option>
          <option value="3">深圳</option>
          <option value="4">杭州</option>
        </select>
        <label>选择框: </label>
        <select>
          <option value="">平台收入</option>
          <option value="0">北京</option>
          <option value="1">上海</option>
          <option value="2">广州</option>
          <option value="3">深圳</option>
          <option value="4">杭州</option>
        </select>
      </slot>

      <a href="javascript:" :class="{active:currentClick === index}" @click.prevent="handleClickTarget(index)" :key="index" v-for="(item,index) in spanTitle">
      {{item}}
      </a>
    </div>

    <slot name="container"></slot>

    <div ref="ctnRef" class='chart_container'></div>

  </div>
</template>

<script>
export default {
  name: 'BlueBottomFrame',
  props: ['spanTitle', 'clickPosition'],
  data: function() {
    return {
      currentClick: ''
    }
  },
  methods: {
    handleClickTarget(index) {
      this.currentClick = index
    }
  },
  created() {
    this.currentClick = this.clickPosition
  },
  mounted() {
    this.$emit('handleContainerDom', this.$refs.ctnRef)
  }
}
</script>

<style lang="less" scoped>
  .public_long_chart {
    width: 1500px;
    height: 420px;
    border-bottom: 9px #36bbb5 solid;
    border-radius: 6px;
    overflow: auto;
    background-color: #ffffff;
  }

  .show .options {
    height: 80px;
    line-height: 80px;
    font-family: 微软雅黑, serif;
    padding-left: 28px;

  }

  .options label {
    color: #666666;
    font-size: 16px;

  }
  .options select {
    width: 220px;
    height: 38px;
    border: 1px #e4e4e4 solid;
    border-radius: 5px;
    margin-left: 10px;
    margin-right: 40px;
    font: 16px/38px '微软雅黑';
    color: #333333;
    padding-left: 8px;
    box-sizing: border-box;
  }

  .options select option {

  }

  .options a {
    width: 66px;
    height: 38px;
    display: inline-block;
    border: #36bbb5 1px solid;
    text-align: center;
    color: #333333;
    font: 16px 微软雅黑;
    line-height: 38px;
    border-radius: 6px;
    margin-left: 10px;
    text-decoration: none;
  }

  a.active {
    background-color: #36bbb5;
    color: #fffefe;
  }

  .chart_container {
    height: 340px;
  }

</style>
